// JavaScript Document
	var controlPtNum=4, arrowNum=3, current=2, height=0, maxHeight = 45, heightInLarge=0, maxHeightInLarge=148, maxDist=2000;
  
 // var width = $(#header).width();
 // var space = Math.floor(width/(controlPtNum+arrowNum));
 // $('#1to2').css({'background-image': 'url(processed_mini.png)'});
  function initialStatus(dist){
	  current=1;
	  height = Math.floor(dist/maxDist*maxHeight);
	  $('div.circle').each(function(index ) {
			if(index == (current-1)){			
				$(this).css({'background-image': 'url(http://www.prism.gatech.edu/~xxie37/ar/tempLayout/ring_mini.png)'});
				var proCSS = document.getElementById('processing');
				if(proCSS == null){
					proCSS = document.createElement('div');
					proCSS.setAttribute("id","processing");
					document.getElementById(this.id).appendChild(proCSS);
				}
				var diff = maxHeight-height;
				$('#processing').css({'height': height+'px', 'background-position': '0px -'+diff+'px', '-webkit-transform':' translate(0px,'+diff+'px)', 'content': height});
				console.log(height);
			}
			else $(this).css({'background-image':'url(http://www.prism.gatech.edu/~xxie37/ar/tempLayout/grayed_mini.png)'});
	});
	$('div.arrow').each(function(index ) {
		$(this).css({'background-image': 'url(http://www.prism.gatech.edu/~xxie37/ar/tempLayout/triArrow_gray_mini.png)'});
	});	
  }
  function setColor(dist){
	  height = Math.floor(dist/maxDist*maxHeight);
	  if(height >= maxHeight){ 
	  	height=0;
		var element=document.getElementById("processing");
		if(element!=null){
			var father = document.getElementById('c'+(current));
			father.removeChild(element);
			$(father).css({'background-image': 'url(http://www.prism.gatech.edu/~xxie37/ar/tempLayout/processed_mini.png)'});			
		}
		current++;
		if(current>controlPtNum) current=1;
		$('#c'+current).css({'background-image': 'url(http://www.prism.gatech.edu/~xxie37/ar/tempLayout/ring_mini.png)'});
		var proCSS = document.getElementById('processing');
		if(proCSS == null){
			proCSS = document.createElement('div');
			proCSS.setAttribute("id","processing");
			document.getElementById('c'+current).appendChild(proCSS);
		}
		$('#a'+(current-1)).css({'background-image': 'url(http://www.prism.gatech.edu/~xxie37/ar/tempLayout/triArrow_mini.png)'});
	}
	var diff = maxHeight-height;
	//var margin = '0px '+diffX + 'px';
	$('#processing').css({'height': height+'px', 'background-position': '0px -'+diff+'px', '-webkit-transform':' translate(0px,'+diff+'px)', 'content': height});
	console.log(height);
  }
  
  //object.onclick=function(){SomeJavaScriptCode};
 // $('cs2').onclick=setColor();//height++;window.onload=setColor();

function log(message) {
  $('#console').prepend('<div>' + message + '</div>');
}
 function clickOnCircule() {
	 $('div.circle').each(function(index, circle) {
	//	 circle.addEventListener('touchstart', function() {
		 
		 circle.addEventListener('click', function() {
			 if(index==(current-1)){
				magProcess = document.getElementById('mainPart');
				//log(magProcess);
				if(magProcess == null) {
					//height=0; 
					magProcess=document.createElement('div');
					//magProcess = document.createElement('mainPart');
					magProcess.setAttribute('id', 'mainPart');
				//	log('first case');
					document.body.appendChild(magProcess);
					//magProcess.css({'text-align':'center'});
					//magProcess.innerHTML					
				}
				else{
					//height=maxHeight;
					$("#mainPart").remove();
				//	log('second case');
				}	
				
			 }
		});
	});
	/* 	var target = document.getElementById('c'+(current));
		log(current);
		//target.addEventListener('touchstart',function(){ 
		target.addEventListener("click", function(){
			magProcess = document.getElementById('mainPart');
			//log(magProcess);
			if(magProcess == null) {
				//height=0; 
				magProcess=document.createElement('div');
				//magProcess = document.createElement('mainPart');
				magProcess.setAttribute('id', 'mainPart');
			//	log('first case');
				document.body.appendChild(magProcess);
				
			}
			else{
				//height=maxHeight;
				$("#mainPart").remove();
			//	log('second case');
			}		
		});*/
	}
 	function showInBigPic(dist){
		magProcess = document.getElementById('mainPart');
		//magProcess.innerHTML="<div style='top: 30px;'>";
		//magProcess.innerHTML+=height;
		var ratio = dist/maxDist;
		if(magProcess!=null){
			var detailedP= document.getElementById('detailedProcessing');
			if(detailedP == null){
				temp=document.createElement('div');
				//detailedP = document.createElement('detailedProcessing');
				temp.setAttribute("id","detailedProcessing");
				document.getElementById('mainPart').appendChild(temp);
			}
		  
			heightInLarge = Math.floor(maxHeightInLarge*ratio);
			//console.log(heightInLarge);
			var diff = maxHeightInLarge-heightInLarge;
			
			number = document.getElementById('number');
			if(number==null){  
				number=document.createElement('div');
				number.setAttribute('id', 'number');		
				number.setAttribute('class', 'numbers');				
			}
			//number.innerHTML =  Math.floor(heightInLarge/maxHeightInLarge*100)+"%";;
			number.innerHTML =  Math.floor(dist);
			magProcess.appendChild(number);	
			//var margin = '0px '+diffX + 'px';
			$('#detailedProcessing').css({'height': heightInLarge+'px', 'background-position': '0px -'+diff+'px', '-webkit-transform':' translate(0px,'+diff+'px)'});

			
			}
	}